<template>
  <div>
    <i-form ref="form" :model="formValidate" :rules="ruleValidate">
      <i-form-item>
        <i-form-item label="用户名" prop="name">
          <i-input v-model="formValidate.name"></i-input>
        </i-form-item>
      </i-form-item>
      <i-form-item label="邮箱" prop="mail">
        <i-input v-model="formValidate.mail"></i-input>
      </i-form-item>
    </i-form>
    <button @click="handleSubmit">提交</button>
    <button @click="handleReset">重置</button>
  </div>
</template>
<script>
import iForm from "../components/form/from";
import iFormItem from "../components/form/form-item";
import iInput from "../components/form/input";
export default {
  components: {
    iForm,
    iFormItem,
    iInput
  },

  data() {
    return {
      formValidate: {
        name: "",
        mail: ""
      },
      ruleValidate: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],

        mail: [{ required: true, message: "邮箱不能为空", trigger: "blur" }]
      }
    };
  },

  methods: {
    handleSubmit() {
      console.log(this.$refs.form, 9999)
       debugger
      this.$refs.form.validate(valid => {
       
        if (valid) {
          window.alert("提交成功");
        } else {
          window.alert("表单校验失败");
        }
      });
    },

    handleReset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>
<style lang="css">
</style>